<template>
  <div class="personhome">
    <div class="personhome-left">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <p class="ment-font">我的话题</p>
        </el-menu-item>
        <el-menu-item index="2">
          <p class="ment-font">收藏</p>
          <p></p>
        </el-menu-item>
        <el-menu-item index="3">
          <p class="ment-font">关注</p>
          <p></p>
        </el-menu-item>
        <el-menu-item index="4">
          <p class="ment-font">浏览历史</p>
          <p></p>
        </el-menu-item>
        <!-- <el-menu-item index="5">
          <p class="ment-font">XXX</p>
          <p></p>
        </el-menu-item> -->
      </el-menu>
      <router-view></router-view>
    </div>
    <div class="personhome-right">
      <div class="right-one">
        <div>
          <p class="name">关注者</p>
          <p class="number">{{followers}}</p>
        </div>
        <div>
          <p class="name">获赞数</p>
          <p class="number">{{likeNum}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PersonHome",
  data() {
    return {
      activeIndex: "1",
      followers: 0,
      likeNum: 0
    };
  },
  created() {
    this.$router.push("/mytopic");
  },
  watch: {
    activeIndex(newValue, oldValue) {
      switch (newValue) {
        case "1":
          this.$router.push("/mytopic");
          break;
        case "2":
          this.$router.push("/collect");
          break;
        case "3":
          this.$router.push("/attention");
          break;
        case "4":
          this.$router.push("/history");
          break;
        case "5":
          // this.$router.push("");
          break;
      }
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
      this.activeIndex = key;
    },
  },
};
</script>
<style scoped>
.personhome{
  display: flex;
}
.personhome-left {
  flex: 7;
  /* border: 1px solid black; */
}
.personhome-right {
  flex: 3;
  min-width: 300px;
  padding-left: 10px;
  /* border: 1px solid black; */
}
/* 重写导航栏字体的格式  ************STSRT**********/
.ment-font {
  /* font-size: 15px; */
  color: black;
}
.el-menu--horizontal > .el-menu-item.is-active {
  font-weight: bold;
}
/* 重写导航栏字体的格式  ************ END **********/
.right-one {
  background-color: #FFF;
  display: flex;
}
.right-one > div{
  flex: 1;
  /* border: 1px solid black; */
}
.right-one > div:nth-child(1) {
  border-right: 1px solid transparent;
}
.right-one .name {
  font-size: 19px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}
.right-one .number {
  font-size: 16px;
  line-height: 30px;
  text-align: center;
}
</style>